<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Mongoose OS</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/bootstrap-tour.min.css" rel="stylesheet">
  <link href="css/font-awesome.min.css" rel="stylesheet">
  <link href="css/pnotify.min.css" rel="stylesheet">
  <link href="css/green.css" rel="stylesheet">
  <link href="css/custom.min.css" rel="stylesheet">
  <link href="css/main.css" rel="stylesheet">
</head>

<body class="nav-sm app-hidden">
  <div class="container body">
    <div class="main_container">
      <div class="col-md-3 left_col menu_fixed">
        <div class="left_col scroll-view">
          <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
            <div class="menu_section">
              <ul class="nav side-menu">
                <li><a tab="files"><i class="fa fa-microchip"></i> Device&nbsp;Files </a></li>
                <li><a tab="code"><i class="fa fa-file-code-o"></i> Projects </a></li>
                <li><a tab="configuration"><i class="fa fa-gears"></i> Device&nbsp;Config </a></li>
                <li><a tab="rpc"><i class="fa fa-puzzle-piece"></i>Device&nbsp;Services</a></li>
                <li><a tab="terminal"><i class="fa fa-terminal"></i> Terminal</a></li>
                <li class="">&nbsp;</li>
                <li class="">&nbsp;</li>
                <li><a tab="forum"><i class="fa fa-users"></i> Forum</a></li>
                <li><a tab="docs"><i class="fa fa-book"></i> Docs</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div id="page" style="position: relative; height: 100%;">

        <div id="top_nav">
          <span id="breadcrumb"></span>
          <span id="top_spinner" style="position: relative; margin-left: 2em;"></span>
          <div class="pull-right">

            <button id="version-update" class="hidden btn btn-xs btn-warning"><i class="fa fa-refresh"></i> Update mos tool...</button>

            <span class="devinfo"></span>
            &nbsp;
            <a class="link" data-toggle="modal" data-target="#splash"><i class="fa fa-circle devconn-icon"></i> device setup</a> &nbsp;|&nbsp;
            <!-- <a target="_blank" href="https://forum.mongoose-os.com"><i class="fa fa-comments-o"></i> forum</a> &nbsp;|&nbsp; -->
            <!-- <a target="_blank" href="https://mongoose-os.com/docs/#/overview/"><i class="fa fa-map-o"></i> docs</a> &nbsp;|&nbsp; -->
            <a target="_blank" href="https://mongoose-os.com"><img src="/images/logo_blue.png" xstyle="xheight: 20px;"></a>
          </div>
        </div>

        <div id="d1" class="col-xs-12" style="border: 1px solid transparent;">
          <div id="app_view"></div>
          <div class="splitter-horizontal">
            <div class="text-center"><i class="fa fa-bars"></i></div>
          </div>

          <div id="device-logs-panel" style="position: relative;">
            <div class="col-xs-6" style="height: 100%; margin: 0; padding: 0;">
              <div style="margin: 5px 0; padding: 0;">
                <label style="margin-right: 2em;">Device logs</label>
                <button class="btn btn-xs btn-success pull-right clear-logs-button"><i class="fa fa-trash"></i> Clear logs</button>
              </div>
              <pre class="logs" id="device-logs"></pre>
            </div>
            <div class="col-xs-6" style="height: 100%; margin:0; padding: 0;">
              <div style="margin: 5px 0; padding: 0;">
                <label style="margin-right: 2em;">MOS tool logs</label>
                <button class="btn btn-xs btn-success pull-right clear-logs-button"><i class="fa fa-trash"></i> Clear logs</button>
              </div>
              <pre class="logs" id="mos-logs"></pre>
            </div>
          </div>

        </div>

      </div>
    </div>
  </div>

  <div class="modal fade" id="splash" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">

      <div class="modal-content">

        <div class="modal-header">
          <img src="images/logo_blue2.png" class="pull-left" height="32">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h2 class="modal-title text-center">
            Device status:
            <i class="devconn-text"></i> <i class="fa fa-circle devconn-icon"></i>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          </h2>
        </div>

        <div class="modal-body">

          <ul class="list-unstyled timeline">

            <li>
              <div class="block" id="step1">
                <div class="tags"><a class="tag">
                  <center>Step 1</center></a>
                  <center class="done hidden"><i class="fa fa-check"></i> done!</center></a>
                </div>
                <div class="block_content">
                  <h2 class="title"><a>Plug in your device, choose device address, click Select</a></h2>

                  <div class="form form-inline">
                    <div class="input-group">
                      <span class="input-group-btn">
                        <div class="btn-group dropdown">
                          <button type="button" class="btn btn-default dropdown-toggle"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                          </button>
                          <ul class="dropdown-menu dropdown-ports">
                            <li class="dropdown-header serial">Serial ports on this machine:</li>
                            <li class="dropdown-header recent">Recently used:</li>
                          </ul>
                        </div>
                      </span>
                      <input type="text" class="form-control connect-input" style="min-width: 17em;" placeholder="e.g. COM1, or /dev/ttyUSB0">
                    </div>
<a href="#" data-container="body" data-toggle="popover"
  data-placement="bottom" xtitle="Device addresses"
  data-content="Choose device address in a dropdown, or type into the text field, then click Select. Possible formats of device addresses:<div style='margin-top: 10px;'><b>COMx</b> - serial port on Windows</div><div><b>/dev/ttyUSBx</b> - serial port on Linux</div><div><b>/dev/cu.xxxxxx</b> - serial port on MacOS</div><div><b>ws://IP_ADDRESS/rpc</b> - device on a local network</div><div><b>mqtt://MQTT_SERVER:PORT/DEVICE_ID</b> - device connected to an MQTT server</div>">
  <span class="fa-stack fa-lg" style="margin-left: 5px; margin-top: -8px; color: #ddd;">
    <i class="fa fa-circle-o fa-stack-2x"></i>
    <i class="fa fa-question fa-stack-1x"></i>
  </span>
</a>

                    <button class="btn btn-default btn-mos connect-button pull-right" type="button"><i class="fa fa-link"></i> Select</button>
                  </div>

                  <div id="noports-warning" style="display: none;" class="fade in">
                    <i class="fa fa-warning"></i>
                    Cannot detect any suitable serial port on your system!
                    To fix it:
                    <ol>
                      <li style="border: none;">Plug the device into the USB slot now.
                        The ports dropdown should update automatically.
                      </li>
                      <li style="border: none;">If the ports dropdown still does not populate,
                        install USB-to-Serial driver:
                        <ul>
                          <li style="border: none;"><a href="http://www.ftdichip.com/Drivers/VCP.htm">FTDI drivers</a> for CC3200 LaunchPad</li>
                          <li style="border: none;"><a href="https://www.silabs.com/products/mcu/Pages/USBtoUARTBridgeVCPDrivers.aspx">SiLabs drivers</a> for Espressif boards</li>
                          <li style="border: none;"><a href="https://github.com/adrianmihalko/ch340g-ch34g-ch34x-mac-os-x-driver">CH43x drivers</a> for Espressif boards</li>
                        </ul>
                      </li>
                    </ol>
                  </div>

                </div>
              </div>
            </li>


            <li>
              <div class="block" id="step2">
                <div class="tags">
                  <a class="tag"><center>Step 2</center></a>
                  <center class="done hidden"><i class="fa fa-check"></i> done!</center></a>
                </div>
                <div class="block_content">
                  <h2 class="title"><a>Select firmware, click Flash</a></h2>

                  <div class="form form-inline">
                    <div class="input-group">
                      <span class="input-group-btn">
                        <div class="btn-group dropdown">
                          <button type="button" class="btn btn-default dropdown-toggle"
                            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span class="caret"></span>
                            <span class="sr-only">Toggle Dropdown</span>
                          </button>
                          <ul class="dropdown-menu dropdown-builds">
                            <li class="dropdown-header avail">Available firmwares:</li>
                          </ul>
                        </div>
                      </span>
                      <input type="text" class="form-control builds-input" style="min-width: 17em;" placeholder="e.g. esp8266">
                    </div>

                    <button class="btn btn-default btn-mos pull-right" id="flash-button">
                      <i class="fa fa-download"></i> Flash
                    </button>

                  </div>

                  <div class="excerpt" id="found-device-info" style="display: none; margin-top: 5px;">
                    Mongoose OS is installed on this device:
                    <p class="devinfo"></p>
                  </div> 

                </div>
              </div>
            </li>

            <li>
              <div class="block" id="step3">
                <div class="tags">
                  <a class="tag"><center>Step 3</center></a>
                  <center class="done hidden"><i class="fa fa-check"></i> done!</center></a>
                </div>
                <div class="block_content">
                  <h2 class="title"><a>Configure WiFi</a></h2>
                  <div class="byline"></div>
                  <div class="form form-inline">
                    <input type="text" class="form-control" id="wifi.sta.ssid" placeholder="WiFi network">
                    <input type="password" class="form-control" id="wifi.sta.pass" placeholder="WiFi password">
                    <button class="btn btn-default btn-mos pull-right" id="wifi-button"> <i class="fa fa-save"></i> Save</button>
                  </div>
                </div>
              </div>
            </li>
          </ul>

          <center>
            <button class="btn btn-default btn-mos btn-lg" id="prototype-button" disabled>
              <i class="fa fa-code"></i>
              Start coding
            </button>                        
          </center>
 
        </div>

      </div>
    </div>
  </div>

  <script src="js/jquery.min.js"></script>
  <script src="js/jquery-resizable.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/moment.min.js"></script>
  <script src="js/pnotify.min.js"></script>
  <script src="js/icheck.min.js"></script>
  <script src="js/custom.min.js"></script>
  <script src="js/dash.js"></script>
  <script src="js/ws.js"></script>
  <script src="js/ace/ace.js"></script>
  <script src="js/ace/ext-language_tools.js"></script>
  <script src="js/marked.min.js"></script>

<script>
  ((window.gitter = {}).chat = {}).options = {
    room: 'cesanta/mongoose-os'
  };
</script>
<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>

</body>

</html>
